<template>
	<view class="myOrderBox">
	
		<view class="orderTitle">
            	<uv-tabs lineColor="#00C584" :activeStyle="{
			color: '#00C584',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
    	}" :list="tabList" @click="click"></uv-tabs>

			<!-- <view :class="[titleFlag==0?'active':'titleItem']" @click="unpaidBtn(0)">
				待确认
			</view>
            <view :class="[titleFlag==1?'active':'titleItem']" @click="unpaidBtn(1)">
            	待付款
            </view>
            <view :class="[titleFlag==2?'active':'titleItem']" @click="unpaidBtn(2)">
            	已付款
            </view> -->
		</view>
		<!-- <view class="cardBox" v-for="(item,index) in orderList" :key="index"  -->
            <view class="artItem plr14 ptb13  mlr15 mb18 radius6 justify-between align-center" v-for="(i,n) in orderList" :key="n" @click="tomain(i)">
               
				<image :src="i.cover_image" mode=""></image>
                <view class="flex-col justify-between  flex1" style="height: 200rpx;">
                    <text class="name clamp2">{{i.title}}</text>
					<text class="">比赛时间：{{i.arena_time}}</text>
					
                    <text class="clamp2">报名结束时间：{{i.end_time}}</text>
                </view>
               
            </view>
		<!-- </view> -->
        <view class="" v-if="orderList.length==0">
            <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
        </view>
	
	</view>
</template>

<script>
	import operate from  '@/common/operate.js'
	export default {
		data() {
			return {
				titleFlag: 0,
                tabList:[],
                orderList:[],
				urlapi:operate.api,
                allCarData:[],
                orderItem:{},
                imgList:[],
                page:1,
                
				

			};
		},
		onLoad() {
			
		},	
		onShow() {
			// if (!uni.getStorageSync('logintoken')) {
			// 	uni.reLaunch({
			// 		url: '/pages/login/login'
			// 	})
			// 	return
			// }
			this.getOrder()
		},
        onReachBottom() {
                this.page++
                this.getArticleList()
        },
		methods: {
            formateTime(data){
              return this.$utils.formatDateTime(data)  
            },
		
			tomain(item){
				uni.navigateTo({
					url:'/pages/article/index?id='+item.id
				})
			},
		
			async getOrder() {
				let data = await this.$api.articleCate()
				
                this.tabList=data.list
                this.getArticleList()
                // this.orderList = data.data
			},
            async getArticleList(){
                let data = await this.$api.articleList({
                    page:this.page,
                    cate_id:this.tabList[this.titleFlag].id
                })
                this.orderList=data.list 
                console.log(data)
            },
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//待支付按钮
			click(type) {
				console.log(type)
                this.titleFlag=type.index
                this.page=1
                this.orderList=[]
				this.getArticleList()
			},

            
		}
	}
</script>

<style lang="scss" scoped>
	.myOrderBox {
		min-height: 100vh;
		position: relative;
		background-color: RGBA(245, 245, 245, 1);

		.orderTitle {
			width: 750rpx;
			height: 98rpx;
			background-color: #FFFFFF;
			display: flex;
			font-size: 26rpx;
			color: #666666;
            border-bottom: 2rpx solid  rgba(151,151,151,0.062);
			.titleItem {
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				font-weight: 600;
			}

			.active {
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				color: #000000;
				position: relative;
				font-weight: 600;
			}

			.active::after {
				position: absolute;
				content: "";
				width: 74rpx;
				height: 4rpx;
				bottom: 0rpx;
				left: 50%;
				transform: translateX(-50%);
				background: #2CC6A1;
			}
		}

	}	
    .submitPz{
        width: 165rpx;
        height: 54rpx;
        background: #434343;
        border-radius: 6rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 54rpx;
    }
    .artItem {
        box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.0612);
		background-color: #fff;
        font-size: 24rpx;
        color: #9F9F9F;
        margin-bottom: 36rpx;
        image{
           width: 270rpx;
           height: 200rpx;
            border-radius: 12rpx;
            margin-right: 30rpx;
        }
        .right{
            width: 120rpx;
            height: 54rpx;
            background: rgba(0,199,119,0.2);
            border-radius: 60rpx ;
            font-size: 28rpx;
            color: #2CC6A1;
            text-align: center;
            line-height: 54rpx;
        }
        .name{
            font-size: 32rpx;
            color: #3D3D3D;
        }
    }
</style>